/** 系统组件图 *************************************************************************************************************************************/
		//1画横线horizontalline
		function H_line(x,y,r,color){
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x+r,y);				
			//绘图
			ctx.strokeStyle = color;
		//	ctx.lineWidth=5;
			ctx.stroke();
		}
		//母线
		function mx(x,y,r,color){
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x+r,y);				
			//绘图
			ctx.strokeStyle = color;
			ctx.lineWidth=5;
			ctx.stroke();
		}
		//2画竖线Vertical line
		function V_line(x,y,r,color){
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+r);	
			ctx.lineWidth=2;
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
		}
		//3画圆圈rad    
		function rad(x, y, startAngle, endAngle,r,color) {
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
			ctx.arc(x, y, r, startAngle, endAngle, false);
			ctx.stroke();
			ctx.closePath();
		}
		
		//4画三角形triangle1向下
		function triangle1(x,y,r,color){
		//路径指定
		ctx.beginPath();
		ctx.moveTo(x,y+r*0.29);
		ctx.lineTo(x-r*0.28,y-r*0.20);
		ctx.lineTo(x+r*0.28,y-r*0.20);
		ctx.lineTo(x,y+r*0.29);
		
		//绘图
		ctx.strokeStyle = color;
		ctx.stroke();
		};
		
		//5画三角形triangle2向右
		function triangle2(x,y,r,color){
		//路径指定
		ctx.beginPath();
		ctx.moveTo(x+r*0.12,y+r*0.29);
		ctx.lineTo(x+r*0.12,y-r*0.29);
		ctx.lineTo(x-r*0.25,y);
		ctx.lineTo(x+r*0.12,y+r*0.29);		
		//绘图
		ctx.strokeStyle = color;
		ctx.stroke();
		};
		
		//6画三角形triangle3向左
		function triangle3(x,y,r,color){
		//路径指定
		ctx.beginPath();
		ctx.moveTo(x-r*0.12,y-r*0.29);
		ctx.lineTo(x-r*0.12,y+r*0.29);
		ctx.lineTo(x+r*0.25,y);
		ctx.lineTo(x-r*0.12,y-r*0.29);	
		
		//绘图
		ctx.strokeStyle = color;
		ctx.stroke();
		};
		//三角形向上
		function triangle4(x,y,r,color){
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x+r,y);
			ctx.lineTo(x+r*0.5,y-r*0.86);
			ctx.lineTo(x,y);
			
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
			};
	//7画Y starlike1向上
		function starlike1(x,y,r,color){ 
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x-r*0.24,y-0.32*r);
			ctx.lineTo(x,y);
			ctx.lineTo(x,y+r*0.32);
			
			ctx.moveTo(x+r*0.24,y-0.32*r);
			ctx.lineTo(x,y);
			ctx.lineTo(x,y+r*0.32);
			
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
		};
		
		//8画Ystarlike2向下
		function starlike2(x,y,r,color){
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x+r*0.24,y+0.32*r);
			ctx.lineTo(x,y);
			ctx.lineTo(x,y-r*0.32);
			
			ctx.moveTo(x-r*0.24,y+0.32*r);
			ctx.lineTo(x,y);
			ctx.lineTo(x,y-r*0.32);
			
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
		};
			
		//9不闭合的三角形noclose	
		function noclose(x,y,r,color){
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x-r*0.2,y-r*0.22);
			ctx.lineTo(x+r*0.2,y-r*0.4);
			ctx.lineTo(x+r*0.2,y+r*0.4);				
			ctx.lineTo(x-r*0.2,y+r*0.22);
				
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
			};

		//10画V Vlike	
		function Vlike(x,y,r,color){
			//取得触摸点的坐标点	 
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x-r*0.217,y-r*0.125);
		    ctx.lineTo(x,y+r*0.25);
			ctx.lineTo(x+r*0.217,y-r*0.125);
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
			};
		//11三卷变框three-circuit transformer
		function Three_ctb(x,y,r,color){
			rad(x, y, 0, 2 * Math.PI,r, color);
			rad(x, y-r*1.73, 0, 2 * Math.PI,r, color);
			rad(x-r*1.3, y-r*0.87, 0, 2 * Math.PI,r, color);
			}
		
		//12三卷变three-circuit transformer
		function Three_ct(x,y,r,color){
			rad(x, y, 0, 2 * Math.PI,r, color);
			rad(x, y-r*1.73, 0, 2 * Math.PI,r, color);
			rad(x-r*1.3, y-r*0.87, 0, 2 * Math.PI,r, color);
			triangle1(x,y-r*1.7,r,color);
			Vlike(x-r*1.3,y-r,r,color);
			Vlike(x-r*0.05,y,r,color);
			
			}
		
		
		//13两卷变Two coil transformer
		function Two_ct(x,y,r,color){
			rad(x, y, 0, 2 * Math.PI,r, color);
			rad(x, y-r*1.73, 0, 2 * Math.PI,r, color);
			starlike2(x,y-r*1.7,r,color);
			triangle1(x-r*0.05,y,r,color);
			}
		
		//14两卷星形变压器Two coil star transformer
		function Two_ctY(x,y,r,color){
			rad(x, y, 0, 2 * Math.PI,r, color);
			rad(x, y-r*1.73, 0, 2 * Math.PI,r, color);
			starlike2(x,y-r*1.7,r,color);
			starlike2(x-r*0.05,y,r,color);
			}
		
		//15 分站箱变 Substation box change	
		function Sbc(x,y,r,color){			
			rad(x, y, 0, 2 * Math.PI,r, 'yellow');
			rad(x+r*0.8, y+r*1.2, 0, 2 * Math.PI,r, color);
			rad(x-r*0.8, y+r*1.2, 0, 2 * Math.PI,r, color);
			starlike1(x,y,r,color);
			triangle3(x-r,y+r*1.2,r,color);
			triangle2(x+r,y+r*1.2,r,color);
		}
		
		//16大地
		function ground(x,y,r,color){
			V_line(x+r*0.6, y-r, r, color);
			H_line(x, y, r*1.2, color);
			H_line(x+r*0.2, y+r*0.3, r*0.8, color);
			H_line(x+r*0.3, y+r*0.6, r*0.6, color);
		}
		
		//17断路器QF
		function QF(x, y,r,color,fillStyle) {
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+r*2);
			ctx.lineTo(x+r,y+2*r);
			ctx.lineTo(x+r,y);
			ctx.lineTo(x,y);
			//ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;  //描边颜色
            ctx.fillStyle = fillStyle;  //填充颜色
 
            ctx.fill();  //填充
            ctx.stroke();  //描边
		};
	
		//18小车
		function cart(x,y,r,color){
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x+r,y-r);
			ctx.lineTo(x+r*2,y);
			
			ctx.moveTo(x,y+r*0.2);
		    ctx.lineTo(x+r,y-r*0.8);
			ctx.lineTo(x+r*2,y+r*0.2);
			//绘图
			ctx.strokeStyle = color;
			ctx.stroke();
		};
			
		//19手车handcart
		function handcart1(x,y,r,color1){ 
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x+r,y-r*0.5);
			ctx.lineTo(x+r*2,y);			
			ctx.moveTo(x,y+r*0.2);
		    ctx.lineTo(x+r,y-r*0.3);
			ctx.lineTo(x+r*2,y+r*0.2);
			ctx.strokeStyle = color1;
			ctx.stroke();
		};
		function handcart2(x,y,r,color2){
			ctx.beginPath();
			ctx.moveTo(x+r,y-r*0.5);
		    ctx.lineTo(x+r,y-r*0.8);
		    
		    ctx.moveTo(x+r,y-r*0.3);
		    ctx.lineTo(x+r,y+r*0.2);
			//绘图
			ctx.strokeStyle = color2;
			ctx.stroke();
		};
		function handcart(x,y,r,color1,color2){	
			handcart1(x, y, r, color1);
			handcart2(x, y, r, color2);
			
		};
		
		//20刀闸disconnecting link
		function dis_link(x,y,r,color){
			rad(x+r*3, y, 0, 2 * Math.PI,r,color);
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x+r*2,y);
		    
		    ctx.moveTo(x+r*4,y);
		    ctx.lineTo(x+r*10,y-r*3.46);
		    
		    ctx.moveTo(x+r*10,y+r*2);
		    ctx.lineTo(x+r*10,y-r*2);
		    
		    ctx.moveTo(x+r*10,y);
		    ctx.lineTo(x+r*11,y);
		    ctx.strokeStyle = color;
			ctx.stroke();
		};
		function dis_link1(x,y,r,color){
		//	rad(x+r*3, y, 0, 2 * Math.PI,r,color);
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x-r,y-r);
		    ctx.strokeStyle = color;
			ctx.stroke();
		};
		function dis_link2(x,y,r,color){
			//	rad(x+r*3, y, 0, 2 * Math.PI,r,color);
			// 	ctx.rotate(30 * Math.PI / 180);
				ctx.beginPath();
				ctx.moveTo(x,y);
			    ctx.lineTo(x+1.4*r,y-1.47*r);
			    ctx.strokeStyle = color;
				ctx.stroke();
			};
		function dis_link3(x, y,l,w,color){
			ctx.rotate(40*Math.PI/180);
			ctx.rect(x,y,l,w);
			ctx.strokeStyle = color;
			ctx.stroke();
			};
		
		//21隔离刀quarantine
		function quarantine(x,y,r,color){
			
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x,y+r*2);
		    
		    ctx.moveTo(x,y);
		    ctx.lineTo(x-r*3.7,y-r*8);
		    
		    ctx.moveTo(x+r*2,y-r*8);
		    ctx.lineTo(x-r*2,y-r*8);
		    
		    ctx.moveTo(x,y-r*8);
		    ctx.lineTo(x,y-r*10);
		    ctx.strokeStyle = color;
			ctx.stroke();
		};
		
		//22 10/110/35KV线路
		function line10(x,y,r,color,fillStyle){
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+r*4);
			
			ctx.moveTo(x+r*0.5,y+r*4);
			ctx.lineTo(x-r*0.5,y+r*4);
			ctx.lineTo(x,y+r*5);
			ctx.lineTo(x+r*0.5,y+r*4);
			//ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;  //描边颜色
            ctx.fillStyle = fillStyle;  //填充颜色
 
            ctx.fill();  //填充
            ctx.stroke();  //描边
		};
		
		//23 PT
		function PT(x,y,r,color){
			rad(x, y, 0, 2 * Math.PI,r, color);
			rad(x+r*0.8, y+r*1.2, 0, 2 * Math.PI,r, color);
			rad(x-r*0.8, y+r*1.2, 0, 2 * Math.PI,r, color);
			starlike1(x,y,r,color);
			noclose(x-r,y+r*1.2,r,color);
			starlike1(x+r,y+r*1.2,r,color);
			
		};
		
		//24 保险
		function safety1(x,y,r,color) {
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x,y-r*2);
			ctx.lineTo(x+r,y-r*2);
			ctx.lineTo(x+r,y);
			ctx.lineTo(x,y);
			
			ctx.moveTo(x+r*0.5,y-r*2);
			ctx.lineTo(x+r*0.5,y-r);
			ctx.closePath();
			ctx.strokeStyle = color;  //描边颜色
            ctx.stroke();  //描边
		};
		function safety2(x,y,r,color,fillStyle){	
			ctx.beginPath();
			ctx.moveTo(x+r*0.4,y-r);
			ctx.lineTo(x+r*0.6,y-r);
			ctx.lineTo(x+r*0.5,y-r*0.7);
			ctx.lineTo(x+r*0.4,y-r);
			//ctx.lineWidth = lineWidth;
			ctx.fillStyle = fillStyle;  //填充颜色
			ctx.fill();  //填充
			ctx.closePath();
            ctx.strokeStyle = color;  //描边颜色           
            ctx.stroke();  //描边
		};
		function safety(x,y,r,color,fillStyle){
			safety1(x, y, r, color);
			safety2(x, y, r, color, fillStyle);
		};
	
		//25   变压器VQR投入
		function T_VQR(x,y,startAngle, endAngle,r,color){
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
			ctx.arc(x, y, r, startAngle, endAngle, false);			
			//创建一个表示放射性颜色渐变的CanvasGradient对象
			//该对象的作用域是以(x,y)为圆心、半径为r1的内圆和以(x,y)为圆心、半径为r2的外圆之间的环状区域
			var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r);
			//在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变
			canvasGradient.addColorStop(0, "#fff");
			//在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变
			canvasGradient.addColorStop(0.5, "#5aff7b");
			//在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变
			canvasGradient.addColorStop(1, "#00ff00");
			//将fillStyle的属性值设为该CanvasGradient对象
			ctx.fillStyle = canvasGradient;
			ctx.fill();  //填充
			ctx.stroke();
			ctx.closePath();
		};
		

		
		//26 容抗器Reactance
		function Reactance(x,y,r,color){
			H_line(x, y, 2*r, color);
			H_line(x, y-r, 2*r, color);
		};
		
		//27应用状态Application state
		function As(x,y,startAngle, endAngle,r,color,fillStyle){
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
			ctx.arc(x, y, r, startAngle, endAngle, false);
			ctx.fillStyle = fillStyle;  //填充颜色
			
			//创建一个表示放射性颜色渐变的CanvasGradient对象
			//该对象的作用域是以(x,y)为圆心、半径为r1的内圆和以(x,y)为圆心、半径为r2的外圆之间的环状区域
			var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r);
			//在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变
			canvasGradient.addColorStop(0, "#fff");
			//在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变
			//canvasGradient.addColorStop(0.7, "#6f6f6f");
			//在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变
			canvasGradient.addColorStop(1, "#3a3a3a");
			//将fillStyle的属性值设为该CanvasGradient对象
			ctx.fillStyle = canvasGradient;
			ctx.fill();  //填充
			ctx.stroke();
			ctx.closePath();
		};
		
		//28国际标准断路器ISQF
		function ISQF(x,y,r,color){
			
			ctx.beginPath();
			ctx.moveTo(x,y);
		    ctx.lineTo(x,y+r*2);
		    
		    ctx.moveTo(x,y);
		    ctx.lineTo(x-r*1.5,y-r*2.5);
		    
		    ctx.moveTo(x-r,y-r*3);
		    ctx.lineTo(x+r,y-r*2);
		    
		    ctx.moveTo(x+r,y-r*3);
		    ctx.lineTo(x-r,y-r*2);
		    
		    ctx.moveTo(x,y-r*3.5);
		    ctx.lineTo(x,y-r*2.5);
		    ctx.strokeStyle = color;
			ctx.stroke();
		};
		function ISQF2(x,y,r,color){
			
			ctx.beginPath();
		    
		    ctx.moveTo(x,y);
		    ctx.lineTo(x-r,y+r*0.5);
		    
		    ctx.moveTo(x-1.5*r,y+r*0.5);
		    ctx.lineTo(x-r,y-r/3);
		    
		    ctx.moveTo(x-r*3/2,y-0.5*r);
		    ctx.lineTo(x-r,y+0.5*r);
		    ctx.strokeStyle = color;
			ctx.stroke();
		};
		//29逆变器Inverters
		function Inverters(x, y,r,color) {
			rad(x+r*0.3, y+r*0.3, 0, Math.PI,r/8,color);
			rad(x+r*0.55, y+r*0.3, 1*Math.PI,0,r/8,color);
			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x,y+r*2);
			ctx.lineTo(x+r,y+2*r);
			ctx.lineTo(x+r,y);
			ctx.lineTo(x,y);
			
			ctx.moveTo(x+r,y);
			ctx.lineTo(x,y+r*2);
			
			ctx.moveTo(x+r*0.35,y+r*1.80);
			ctx.lineTo(x+r*0.75,y+r*1.80);
			//ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;  //描边颜色
         
            ctx.stroke();  //描边
		};
		//画矩形(实心)
		function juxingsx(x, y,l,w,bgcolor){
			ctx.fillStyle = bgcolor;           
			ctx.fillRect(x, y,l,w); 
		};
		//画矩形(空心)
		function juxingkx(x, y,l,w,color){
			ctx.rect(x, y,l,w);
			ctx.strokeStyle = color;
			ctx.stroke();
		};
		//画矩形(带边框实心)
		function juxing(x, y,l,w,color,bgcolor){
			ctx.fillStyle=bgcolor;
			ctx.strokeStyle = color;
			ctx.linewidth=3;
			ctx.fillRect(x, y,l,w);
			ctx.strokeRect(x, y,l,w);
			ctx.stroke();
		};
		//画矩形(带边框实心加文字)
		function juxingtext(x, y,l,w,color,bgcolor,text){
			ctx.fillStyle=bgcolor;
			ctx.strokeStyle = color;
			ctx.linewidth=3;
			ctx.fillRect(x, y,l,w);
			ctx.strokeRect(x, y,l,w);
			ctx.stroke();
			draw(text,x+l/2,y+w/2);
		};
		//文字
		function draw(text,x,y){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			ctx.font = "normal 16px 黑体";
			ctx.fillStyle = "#fff";
			ctx.fillText(text,x,y);
		};